<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-page-3/#margin-dimension">
<meta name="assert" content="Test vertical-rl writing mode document.">
<meta name="flags" content="ahem">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
<!-- Note: Using the ref from the preceding test here. -->
<link rel="match" href="dimensions-013-print-ref.html">
<style>
  html {
    writing-mode: vertical-rl;
  }
  @page {
    margin: 6em;
    width: 20em;
    height: 16em;
    font: 16px/1 Ahem;
    white-space: pre-wrap;

    @top-left-corner {
      text-align: left;
      vertical-align: bottom;
      content: "x\ax";
    }
    @top-right-corner {
      text-align: left;
      vertical-align: bottom;
      content: "x xxxxxxxxx";
    }
    @bottom-left-corner {
      text-align: left;
      vertical-align: bottom;
      margin-top: 2.5em;
      content: "x\ax\ax\ax\ax\ax\ax\ax\axx";
    }
    @bottom-right-corner {
      writing-mode: horizontal-tb;
      text-align: left;
      vertical-align: top;
      content: "x\ax";
    }

    /* Min/max width for top-left is 7em (seven lines in a vertical writing
       mode). For top-right it is 1em. Available space is 20em. Unused space
       becomes 12em. This will be distributed proportionally based on max
       widths. Left gets 7/8, right gets 1/8. Final widths become 7em+12em*7/8 =
       17.5em for left, and 1em+12em*1/8 = 2.5em for right. */
    @top-left {
      text-align: left;
      vertical-align: bottom;
      margin-top: 4em;
      content: "x\ax\ax\ax\ax\ax\ax\a";
      background: hotpink;
    }
    @top-right {
      text-align: left;
      vertical-align: bottom;
      margin-bottom: 50%;
      content: "x";
      background: yellow;
    }

    /* Min content height for left-top is 18em. Min content height for
       left-bottom is 6em.

       Available space is 16em. Unused space is 20em - (18em + 6em) = -8em.
       Total min height is larger than what's available.

       Shrink proportionally to min content heights. Top flex is 18. Bottom flex
       is 6. Total flex is 24.

       Top height: 18em + (-8em) * 18/24 = 12em
       Bottom height: 6em + (-8em) * 6/24 = 8em */
    @left-top {
      text-align: left;
      vertical-align: bottom;
      margin-left: 4em;
      content: "x\ax\ax\ax\ax\ax\axxxxxxxxxxxxxxxxxx";
      background: yellow;
    }
    @left-bottom {
      text-align: left;
      vertical-align: middle;
      margin-block-end: auto;
      margin-block-start: 3em;
      content: "xxxxxx";
      background: hotpink;
    }

    /* Max inner content height of right-top is 3em. It has auto margins, but
       since the vertical axis is the main axis, they are treated as 0.
       Therefore max outer content height is also 3em.

       Max inner content height of right-bottom is 1em. Its margins are all 25%.
       Available vertical space is 16em, meaning that top + bottom margin
       becomes 50% = 8em. Max outer content height becomes 9em.

       Flex for top becomes 3. Flex for bottom becomes 9. Total flex becomes 12.
       Unused space is 4em.

       Top outer height: 3em + 4em*3/12 = 4em
       Bottom outer height: 9em + 4em*9/12 = 12em */
    @right-top {
      text-align: left;
      vertical-align: bottom;
      margin: auto;
      block-size: fit-content;
      content: "xxx\ax";
      background: hotpink;
    }
    @right-bottom {
      text-align: left;
      vertical-align: bottom;
      margin: 25%;
      content: "x";
      background: yellow;
    }

    /* bottom-left gets a min-width of 1em (one line in a vertical writing
       mode), bottom-right gets a min-width of 3em (three lines in a vertical
       writing mode). So left gets 1/4 of the surplus, and right gets 3/4.
       Available space is 20em. Unused space is 20em-4em = 16em.  Left width:
       1em+16em*1/4 = 5em Right width: 3em+16em*3/4 = 15em

       Bottom-right has an intrinsic height (inline-size) larger than
       available. Overconstrainedness is resolved by forcing margin-bottom to
       auto, giving it a negative value so that the outer top of the box is
       flush with the top of the page bottom margin area. */
    @bottom-left {
      vertical-align: bottom;
      text-align: left;
      margin-top: auto;
      height: min-content;
      content: "xx";
      background: yellow;
    }
    @bottom-right {
      vertical-align: bottom;
      text-align: left;
      margin-inline-start: 1em;
      border-bottom: 20px solid red;
      height: min-content;
      content: "x\ax\axxxxxxxxx";
      background: hotpink;
    }
  }
  body {
    background: blue;
  }
</style>
